<template>
	<view style="width:100%;height:100%;">
		    <section class="section">
        <view class="login-content">
            
            <view class="login-header">
              <img src="/static/image/img_03.png"/>
            </view>
            
            <view class="login-title">登录/注册</view>
         
            <form class="login-form" action="">
                <view class="login-form-input">
                    <img class="login-form-icon" src="static/image/icon_03.png" alt="手机号码">
                    <input type="number" id="phone" maxlength="11" name="account" placeholder="请输手机号码" v-model="phone" />
                </view>
                <view class="login-form-input login-form-password">
                    <img class="login-form-icon" src="static/image/icon_04.png" alt="密码">
                    <input type="password" name="password" id="password" placeholder="请输入密码或设置密码" v-model="password" />
                    <view class="login-password-icon">
                        <img  src="/static/image/icon_05.png" alt="icon">
                    </view>
                </view>
                <view class="login-form-input login-form-code" style="display: none">
                    <img class="login-form-icon" src="static/image/icon_02.png" alt="验证码">
                    <input type="number" name="code" id="code" placeholder="请输入验证码" v-model="code" />
                    <input type="hidden" name="__token__" id="token" value="{$Request.token}" v-model="token" />
                    <button class="login-code-btn" type="button" onclick="getCode()">获取</button>
                </view>
                <view class="login-form-btn">
                    <button type="button" disabled id="submit">登录或注册</button>
                </view>
                <view class="login-form-tips">
                    <img src="static/image/icon_06.png" alt="提示">
                    <text>请输入<span>手机号码</span>自动检测新老账号</text>
                </view>
              
                <view class="login-form-agreement">
					  <checkbox 
					      v-model="isChecked" 
					      class="custom-checkbox"
						  @click="handleChange"
					    />
                    我同意<a href="javascript:void(0)" onclick="xieyi()">用户协议</a>，并遵守和承担相关法律法规
                </view>
            </form>
        </view>
    </section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked:false,
				password:'',
				phone:'',
				token:'',
			}
		},
		methods: {
			handleChange(){
				this.isChecked = !this.isChecked; 
				console.log(this.isChecked,'isChecked');
				console.log(this.password,'password');
				console.log(this.phone,'phone');
				console.log(this.token,'token');
			}
		}
	}
</script>

<style lang="less" scoped>

.login-content {
    background: url(/static/image/back_02.png) #FFFFFF center top no-repeat;
    background-size: 100%;
    min-height: 100vh;
}

.login-header {
    padding: 80px 0 20px;
    text-align: center;
}

.login-header span {
    width: 150px;
    height: 136px;
    background-image: url(/static/image/img_03.png);
    background-size: cover;
    display: inline-block;
}

.login-title {
    position: relative;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    padding-bottom: 10px;
}

.login-title::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 26px;
    height: 4px;
    content: " ";
    background: #EC81A7;
    border-radius: 2px;
    margin-left: -13px;
}

.login-form {
    display: block;
    padding: 20px 30px;
}

.login-form-input {
    position: relative;
    background: #F5F5F5;
    height: 44px;
    border-radius: 22px;
    margin-top: 15px;
    padding-left: 44px;
    overflow: hidden;
}

.login-form-input:first-child {
    margin: 0;
}

.login-form-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 14px;
    margin-top: -8px;
}

.login-form-input input {
    width: 100%;
    height: 44px;
    border: none;
    padding: 0 15px 0 0;
    margin: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
}

.login-form-input input::placeholder {
    font-size: 14px;
}

.login-form-password {
    padding-right: 44px;
}

.login-password-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-password-icon img {
    width: 16px;
    height: 16px;
    margin: 0;
}

.login-form-code {
    padding-right: 120px;
}

.login-form-code::after {
    position: absolute;
    content: " ";
    top: 12px;
    bottom: 12px;
    right: 120px;
    width: 1px;
    background: #EC81A7;
}

.login-code-btn {
    position: absolute;
    height: 44px;
    border: none;
    top: 0;
    right: 0;
    width: 120px;
    padding: 0;
    background: transparent;
    color: #EC81A7;
}

.login-form-btn {
    margin-top: 30px;
}

.login-form-btn button {
    width: 100%;
    height: 44px;
    background: #EC81A7;
    color: white;
    border: none;
    border-radius: 22px;
    font-size: 16px;
}

.login-form-btn button:disabled {
    background: rgba(236, 129, 167, .2);
    color: #888;
}

.login-form-tips {
    padding: 20px 0;
    text-align: center;
    color: #666666;
}

.login-form-tips span {
    color: #EC81A7;
}

.login-form-tips img {
    margin: 0 5px 0 0;
    width: 16px;
    height: 16px;
}

.login-form-agreement {
    padding: 30px 10px;
    text-align: center;
    color: #333;
}

.login-form-agreement a {
    color: #4286C8;
    margin: 0 2px;
}

.login-form-checkbox {
    position: relative;
    height: 20px;
    width: 20px;
    margin-right: 5px;
}

.login-form-checkbox input[type='checkbox'] {
    opacity: .5;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.login-form-checkbox i {
    position: absolute;
    top: -1px;
    left: 3px;
}

.login-form-checkbox label {
    vertical-align: top;
    display: inline-block;
    background: white;
    border: solid 2px #AFAFAF;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    color: white;
}

.login-form-checkbox input[type='checkbox']:checked+label {
    background: #EC81A7;
    border-color: #EC81A7;
}

.login-header{
	padding: 50px 0 20px;
	text-align: center;
	img{
		width: 150px;
		height: 136px;
		background-image: url(/static/image/img_03.png);
		background-size: cover;
		display: inline-block;
	}
}
.login-form-agreement{
	padding-top: 20px;
}

.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
}

::v-deep uni-checkbox .uni-checkbox-input{
	border-radius: 50%;
	width: 18px;
	height: 18px;
	margin-bottom: 5px;
}
</style>
